import React from 'react'
import {Carousel,} from 'antd-mobile'
import dataPage from '../../res/images/web/luodi/比赛列表@2x.png'
import gamePage from '../../res/images/web/luodi/文字直播@2x.png'
import newsPage from '../../res/images/web/luodi/新闻@2x.png'
import bg from '../../res/images/web/luodi/背景@2x.png'
import logo from '../../res/images/web/luodi/世界播1@2x.png'
import xiazai from '../../res/images/web/luodi/DOWNLOAD@2x.png'
import logo_big from '../../res/images/web/luodi/世界播2@2x.png'
import CustomButton from "../../shared-components/CustomButton/CustomBotton";

const qudao_url = 'https://youtoball.oss-cn-shenzhen.aliyuncs.com/apk/retou-release3.0.1_13.apk'

class LuoDi extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            imgList: [
                {url: dataPage, desc: '-专业数据实时更新-',},
                {url: gamePage, desc: '-阵容直播评分全都有-',},
                {url: newsPage, desc: '-足坛事件比赛全资讯-',},
            ],
            slideIndex: 1,
            imgHeight: '324px',
        }
    }

    download = () => {
        window.location.href = qudao_url
    }

    render() {

        // return <div
        //     style={{
        //         background: `no-repeat url("${bg}") 50% 50%/cover`,
        //         position: 'fixed',
        //         top: 0,
        //         left: 0,
        //         width: '100%',
        //         height: '100%',
        //     }}
        // >
        //     <Swiper
        //         spaceBetween={50}
        //         slidesPerView={1}
        //         onSlideChange={() => console.log('slide change')}
        //         onSwiper={(swiper) => console.log(swiper)}
        //         width={191}
        //
        //     >
        //         {this.state.imgList.map((img, index) => {
        //             return <SwiperSlide
        //                 key={index}
        //             >
        //                 <img src={img} alt='' style={{width: '100%',}}/>
        //             </SwiperSlide>
        //         })}
        //     </Swiper>
        // </div>
        return <div
            style={{
                background: `no-repeat url("${bg}") 50% 50%/cover`,
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
            }}
        >
            <img
                src={logo}
                alt=''
                style={{
                    width: 83,
                    height: 28,
                    marginTop: '22px',
                    marginLeft: '27px',
                }}
            />

            <diva
                style={{
                    width: '194px',
                    height: '84px',
                    margin: '0 auto 4px',
                    // background: '#fff',
                }}
            >
                <img src={logo_big} alt="" style={{width: '100%',}}/>
            </diva>

            <p
                style={{
                    margin: '0 auto 8px',
                    fontWeight: '400',
                    color: 'rgba(255,255,255,1)',
                    lineHeight: '20px',
                    textAlign: 'center',
                }}
            >专业足球数据服务平台及内容社区</p>

            <Carousel
                slideWidth='191x'
                // infinite={true}
                // cellSpacing={-100}
                selectedIndex={1}
                afterChange={idx => this.setState({slideIndex: idx,})}
            >

                {this.state.imgList.map((img, index) => {
                    const isCur = index === this.state.slideIndex
                    // const curIdx = this.state.slideIndex
                    // let transform = ''
                    let curTransform = 'translate(-50%, 0)'
                    // let prevTransform = 'translate(30%, -50%)'
                    // let nextTransform = 'translate(-130%, -50%)'
                    // if (curIdx === 0) {
                    //     if (index === 1) {
                    //         transform = nextTransform
                    //     } else {
                    //         transform = prevTransform
                    //     }
                    // }
                    // if (curIdx === 1) {
                    //     if (index === 0) {
                    //         transform = prevTransform
                    //     } else {
                    //         transform = nextTransform
                    //     }
                    // }
                    // if (curIdx === 2) {
                    //     if (index === 1) {
                    //         transform = prevTransform
                    //     } else {
                    //         transform = nextTransform
                    //     }
                    // }
                    // if (isCur) {
                    //     transform = curTransform
                    // }

                    return <div
                        key={index}
                        style={{
                            height: '360px',
                            width: '100%,',
                        }}
                    >
                        <img
                            alt=''
                            src={img.url}
                            style={{
                                height: '324px',
                                width: '191px',
                                position: 'absolute',
                                top: '0',
                                left: '50%',
                                transform: curTransform,
                                zIndex: isCur ? 1 : 0,
                            }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                        {
                            isCur
                                ? <p
                                    style={{
                                        color: '#fff',
                                        fontSize: '16px',
                                        fontWeight: 600,
                                        lineHeight: '22px',
                                        position: 'absolute',
                                        bottom: '13px',
                                        left: '50%',
                                        transform: 'translate(-50%, 0)',
                                        whiteSpace: 'nowrap',
                                    }}
                                >
                                    {img.desc}
                                </p>
                                : null
                        }
                    </div>

                    // return <div
                    //     key={index}
                    //     style={{
                    //         height: '360px',
                    //         width: '100%,',
                    //     }}
                    // >
                    //     <img
                    //         let=''
                    //         src={img.url}
                    //         style={{
                    //             height: isCur ? '324px' : '236px',
                    //             width: isCur ? '191px' : '133px',
                    //             position: 'absolute',
                    //             top: isCur ? '0' : '50%',
                    //             left: '50%',
                    //             transform: transform,
                    //             zIndex: isCur ? 1 : 0,
                    //         }}
                    //         onLoad={() => {
                    //             // fire window resize event to change height
                    //             window.dispatchEvent(new Event('resize'));
                    //             this.setState({ imgHeight: 'auto' });
                    //         }}
                    //     />
                    //     {
                    //         isCur
                    //             ? <p
                    //             style={{
                    //                 color: '#fff',
                    //                 fontSize: '16px',
                    //                 fontWeight: 600,
                    //                 lineHeight: '22px',
                    //                 position: 'absolute',
                    //                 bottom: '13px',
                    //                 left: '50%',
                    //                 transform: 'translate(-50%, 0)',
                    //                 whiteSpace: 'nowrap',
                    //             }}
                    //         >
                    //             {img.desc}
                    //         </p>
                    //         : null
                    //     }
                    // </div>
                })}
            </Carousel>

            <div
                style={{
                    width: '80%',
                    margin: '23px auto 0',
                }}
            >
                <a href={qudao_url}>
                    <CustomButton bg='#FFA500'>
                        <img
                            alt=""
                            src={xiazai}
                            style={{
                                width: '14px',
                                height: '14px',
                                marginRight: '5px',
                            }}
                        />
                        <span>立即下载世界播APP</span>
                    </CustomButton>
                </a>

            </div>


        </div>
    }

}

export default LuoDi